import React, { useState } from "react";
import { Drawer } from "antd";

interface MyDrawerProps {
  title?: React.ReactNode;
  width?: number | string;
  children: React.ReactElement;
  drawerContent: React.ReactNode;
  drawerProps?: Omit<
    React.ComponentProps<typeof Drawer>,
    "open" | "onClose" | "title" | "width"
  >;
}

const MyDrawer: React.FC<MyDrawerProps> = ({
  title,
  width = 800,
  children,
  drawerContent,
  drawerProps,
}) => {
  const [open, setOpen] = useState(false);

  // 给 children 注入 onClick
  const trigger = React.cloneElement(children, {
    onClick: (e: React.MouseEvent) => {
      setOpen(true);
      if (children.props.onClick) {
        children.props.onClick(e);
      }
    },
  });

  return (
    <>
      {trigger}
      <Drawer
        destroyOnClose
        title={title}
        width={width}
        open={open}
        onClose={() => setOpen(false)}
        {...drawerProps}
      >
        {drawerContent}
      </Drawer>
    </>
  );
};

export default MyDrawer;
